var userInfo = new Vue({
	el: '#userInfo',
	data: {
		startDate: new Date('1900/01/01'),
		endDate: new Date(),
		popupVisible: false,
		datePicker: '',
		pickerValue: '',
		info: {
			lable: '性别',
			unit: '',
			type: 1
		},
		list: [
			{
				lable: '性别',
				value: '女',
				unit: '',
				type: 1
			}, {
				lable: '身高',
				value: 182,
				unit: 'cm',
				type: 2
			}, {
				lable: '体重',
				value: '68.2',
				unit: 'kg',
				type: 3
			}, {
				lable: '生日',
				value: '1998/01/01',
				unit: '',
				type: 4
			}
		],
		slots: []
	},
	mounted() {
		
	},
	methods: {
		confirm() {
			this.popupVisible = false;
			if (this.pickerValue) {
				this.list[this.info.type - 1].value = this.pickerValue
			}
		},
		onValuesChange(_, values) {
			if(this.info.type === 3){
				this.pickerValue = values[0] + values[1]
			}else{
				this.pickerValue = values[0]
			}
		},
		handleConfirm(date){
			this.list[3].value = dayjs(date).format('YYYY/MM/DD')
		},
		showPicker(info) {
			this.info = info
			if(info.type != 4){
				this.popupVisible = true;
			}else{
				this.datePicker = info.value
				this.$refs.picker.open();
			}
			switch (info.type) {
				case 1:
					this.slots = [{
						flex: 1,
						values: ['男', '女'],
						defaultIndex: ['男', '女'].map(v => v).indexOf(info.value)
					}]
					break;
				case 2:
					let arr = Array(150).fill(1).map((v, k) => k + 100);
					this.slots = [{
						flex: 1,
						values: arr,
						defaultIndex: arr.map(v => v).indexOf(info.value)
					}]
					break;
				case 3:
					let integer = Array(200).fill(1).map((v, k) => k + 1);
					let float = Array(10).fill(1).map((v, k) => '.'+ k);
					let val = this.info.value.split('.');
					let fval = val.length === 2 ? '.'+ val[1]: '.0';
					this.slots = [{
						flex: 1,
						values: integer,
						defaultIndex: integer.map(v => v).indexOf(val[0]*1)
					},{
						flex: 1,
						values: float,
						defaultIndex: float.map(v => v).indexOf(fval)
					}]
					break;
				case 4:
					break;
			}
		}
	},
})
$(function(){
	$(".myPicker .mint-datetime .picker").before('<div class="title">生日</div>')
})